<template>
	<view style="padding-bottom: 150rpx;">
		<u-swiper :list="dataAll.info.gallery" height="400px" radius="0"></u-swiper>
		<view class="ffffff mainpadding">
			<view class="sanshier bold xiaohei">{{dataAll.info.name}}</view>
			<view class="flexleft margin_top">
				<view class="xiaohui main_size margin_right4" style="text-decoration: line-through;">
					{{$t("goodsDetail.yj")}}：￥{{dataAll.info.counterPrice}}</view>
				<view class="xiaojin main_size">{{$t("goodsDetail.xj")}}：￥{{dataAll.info.retailPrice}}</view>
			</view>
			<view class="flexleft margin_top4" v-if="dataAll.brand.name">
				<view class="zcbox flexleft" @click="jumpdetail('/pages/index/pingpaishangxq?id=',dataAll.brand.id)">
					<view class="xiaohuang main_size margin_right1">{{dataAll.brand.name}}</view>
					<u-icon name="arrow-right" color="#F8B900" size="16"></u-icon>
				</view>
			</view>
			<view class="margin_top flexbetween xiaohei titletext" @click="buytype(0)">
				<view class="">{{checkggtext || $t("goodsDetail.ggslxz")}}</view>
				<u-icon name="arrow-right" color="#333" size="20"></u-icon>
			</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="xiaohei" style="font-size: 40rpx;">{{$t("goodsDetail.spcs")}}</view>
			<u-parse :content="dataAll.info.detail"></u-parse>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="xiaohei textcenter" style="font-size: 30rpx;">—— {{$t("goodsDetail.djdzk")}} ——</view>
			<view class="flexbetween flex_wrap ">
				<view class="spbox margin_top" v-for="item in list"
					@click="jumpdetail('/pages/index/shangpinxq?id=',item.id)">
					<image class="sptp" :src="item.picUrl" mode=""></image>
					<view class="" style="padding: 30rpx 15rpx;">
						<view class="ershiba xiaohei xiankuan textcenter">{{item.name}}</view>
						<view class="strongtext xiaojin textcenter margin_top">￥{{item.counterPrice}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ffffff mainpadding gudingdb flexbetween">
			<view class="flexleft" style="margin-left: 30rpx;">
				<view class="margin_right3" @click="shoucang">
					<u-icon name="star" color="#333333" size="28" v-if="dataAll.userHasCollect==0"></u-icon>
					<u-icon name="star-fill" color="#ffb801" size="28" v-if="dataAll.userHasCollect==1"></u-icon>
					<view class="smalltext textcenter xiaohui">{{$t("goodsDetail.sc")}}</view>
				</view>
				<view class="" @click="gouwuche">
					<u-icon name="shopping-cart" color="#333333" size="28"></u-icon>
					<view class="smalltext textcenter xiaohui">{{$t("goodsDetail.gwc")}}</view>
				</view>
			</view>
			<view class="flexleft">
				<view class="jrbtn flexcenter margin_right" @click="buytype(0)">{{$t("goodsDetail.jrgwc")}}</view>
				<view class="lbtn flexcenter" @click="buytype(1)">{{$t("goodsDetail.ljgm")}}</view>
			</view>
		</view>
		<u-popup :show="show" @close="show = false">
			<view class="mainpadding">
				<view class="flexbetween">
					<view class="sptp1">
						<image class="" :src="dataAll.info.picUrl" mode=""></image>
					</view>
					<view class="" style="width: 75%;">
						<view class="titletext xiaohei yhxk">{{dataAll.info.name}}</view>
						<view class="bigtext fonweight xiaojin margin_top">¥{{price}}</view>
					</view>
				</view>
				<template v-if="dataAll.specificationList.length">
					<view class="margin_top" v-for="item in dataAll.specificationList" :key="item.name">
						<view class="ershil fonweight xiaohei">{{item.name}}</view>
						<view class="flexleft flex_wrap">
							<view
								:class="item.selecttext==ite.value?'yxbtn margin_top margin_right2':'wxbtn margin_top margin_right2'"
								v-for="(ite) in item.valueList" :key="ite" @click="checkgg(item,ite)">{{ite.value}}
							</view>
						</view>
					</view>
				</template>
				<view class="flexbetween margin_top5">
					<view class="ershil fonweight xiaohei">{{$t("goodsDetail.gmsl")}}</view>
					<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
						v-model="buynumber"></u-number-box>
				</view>
				<view class="bigbtn margin_top6" @click="showmodal()">{{$t("goodsDetail.qd")}}</view>
			</view>
		</u-popup>
		<u-modal :show="modalshow" :title="$t('goodsDetail.xfgzs')" :confirmText="$t('goodsDetail.qd')" @confirm="ggclose" :cancelText="$t('goodsDetail.qx')"
			@cancel="modalshow=false" showCancelButton>
			<scroll-view scroll-y="true" style="height: 500rpx;">
				<text class="xiaohei titletext bold">
					为方便您更好地选购跨境商品，请仔细阅读并理解以下告知书的内容：
					1. 本单商品如有跨境商品，商品的销售主体信息详见商品详情页或店铺的公示。商品由实际销售主体发货，
					您可以通过销售主体店铺提供的服务追踪物流信息。2. 如商品为跨境商品，实际销售者无法提供发票，
					可能因品牌保修限制，无法支持国内保修，无法享受与原产地同等的售后服务，请您知晓并理解。3. 您购买的
					跨境商品依据原产地或原销售地有关质量、安全、卫生、环保、标识等标准或技术规范要求生产和销售，可能与
					我国标准存在差异，在使用过程中由此可能产生的危害、损失或者其他风险，您需自行承担相关风险。4. 相关跨境商品
					直接购自境外，可能无中文标签，如有需要，您可以通过商品详情页查看相关商品标签中文翻译或联系客服后再下单购买。下单
					购买视为您已经清楚了解物品的外包装及内容且仍然自愿购买。5. 具体版本、批次可能随机发货。商品若出现新、老版
					本更替，可能与商品详情页展示内容细节有所不同（如包装颜色、式样等变化；批次产地不同等），但不影响商品品质
					。6. 一般境外商品在包装设计上比较注重环保和便捷性，故商品包装可能较为简单；部分商品包装可能无外盒或
					
					盒口无封口贴、未塑封（多见于欧美、日韩化妆品）。经跨境长途运输，部分商品外包装可能出现压痕、微
					损、封签（若有）脱开、喷印日期因刮蹭碰撞导致磨损等现象，这些均属于正常现象，不影响商品品质。因跨境配送通
					关等原因，可能存在分批发货导致收货延迟等问题，建议您审慎关注商详页面的商品配送特别说明。7.跨境商品包装上一般
					不标注保质期限，通常只在产品包装上标注生产日期或到期日，也存在仅标注出厂批号的情况，比如日本、欧洲洗
					护以及化妆品，
					但一般可通过批号识别生产或者失效日期。8. 跨境商品的购买人或收件人将被记录为进口方，必须遵守中国的相关
					法律法规。您承诺将遵守相关国家/地区法律法规并接受海关、商检、邮政等部门的监管，提供必要的身份及收货信息，
					足额支付应缴的进口税费，并对此承担所有法律责任。9. 您购买的商品仅限个人自用，不得进行二次销售。10. 基于跨境
					商品属性，您下单后将无法支持更改地址；且不支持无理由退货的商品，发货后不支持无理由取消订单及无理由拒签商品。
					故请您下单前务必仔细核对确认所购商品，并确保收件地址、收件人及联系方式准确无误。七天无理由退货支持与否请以商
					品详情页提示为准。11. 您在使用本服务过程中提供的信息应当合法、真实、准确、完整、有效。因您提供的信息不合法、
					不真实或不完整等原因所造成的交易阻断等全部法律责任和损失由您独自承担。12. 您现委托商家、供货商、平台、物流商
					、支付机构办理申报、代缴税款、代理购汇等事宜，您同意签署《微信代理购汇服务协议》，并承诺提供(或通过授权的第
					三方提供)真实、准确及有效的身份信息(如姓名、身份证影印件)供商家、供货商、平台、物流商、支付机构依法办理实名审
					核、商品清关、购汇手续。
				</text>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				list: [],
				show: false,
				buy_type: 0,
				price: "",
				guigeflag: false,
				buynumber: 1,
				checkggtext: "",
				modalshow: false,
			}
			
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			this.init()
		},
		watch: {
			'dataAll.specificationList': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						if (item.selecttext) {
							arr.push(item.selecttext)
						}
					})
					this.checkggtext = arr.join()
					this.dataAll.productList.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.specifications.join() == arr.join()) {
							this.price = item.price //价格赋值
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			gouwuche() {
				uni.switchTab({
					url: "/pages/car/car"
				})
			},
			shoucang() {
				httpRequest.request('/wx/collect/addordelete', 'POST', {
					valueId: this.listid,
					type: 0
				}).then(res => {
					this.getDetail()
				})
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite.value
			},
			buytype(val) {
				this.buy_type = val
				this.show = true
			},
			getDetail() {
				httpRequest.request('/wx/goods/detail', 'GET', {
					id: this.listid
				}).then(res => {
					this.dataAll = res.data
					res.data.specificationList.forEach(current => {
						this.$set(current, "selecttext", "")
					})
					this.price = this.dataAll.info.retailPrice
				})
			},
			init() {
				httpRequest.request('/wx/goods/related', 'GET', {
					id: this.listid
				}).then(res => {
					this.list = res.data.goodsList
				})
			},
			showmodal() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (!this.guigeflag) {
					httpRequest.toast(this.$t('goodsDetail.qxzgg'))
					return
				}
				this.show = false
				this.modalshow = true
			},
			ggclose() {
				this.modalshow = false
				if (this.buy_type == 0) { //加入购物车
					this.addcar()
				} else {
					let data = {
						order_type: this.dataAll.type,
						type: "detail", //detail=商品详情,cart=购物车
						data: [{
							goods_id: this.listid,
							number: this.buynumber,
							sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id : this.sku_id
						}]
					}
					uni.navigateTo({
						url: '/pages_homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			addcar() {
				httpRequest.request('/wx/cart/add', 'POST', {
					goodsId: this.listid,
					number: this.buynumber,
					productId: this.sku_id
				}).then(res => {
					httpRequest.toast(res.errmsg)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sptp1 {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		image {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.wxbtn {
		width: 147rpx;
		height: 53rpx;
		background: #F5F5F5;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 147rpx;
		height: 53rpx;
		background: rgba(171, 149, 109, 0.1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #ab956d;
		border: 2rpx solid #ab956d;
	}

	.zcbox {
		border: 1rpx solid #ab956d;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.lbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #f6373a;
		width: 230rpx;
		border-radius: 0 45rpx 45rpx 0;
	}

	.jrbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #FFB801;
		width: 230rpx;
		border-radius: 45rpx 0 0 45rpx;
	}
</style>